import { createRouter, createWebHashHistory} from 'vue-router'      //导入router，createRouter 用于创建路由实例，createWebHashHistory 用于创建基于哈希模式的路由历史记录，哈希模式的 URL 中会包含 # 符号
import Home from '@/components/Home.vue' // 导入 Home 组件，它将作为根路由的组件。
import storage from './../utils/storage' // 导入 storage 工具，用于存储和获取用户信息。
import API from './../api'
import utils from './../utils/utils' // 导入工具函数，用于处理一些通用的操作。

const routes = [                    //定义路由对象，是一个数组
    // Home主模块
    {
        name:'home',
        path:'/',
        meta:{
            title:'首页'
        },
        component:Home,  // 指定该路由对应的组件为 Home 组件。
        redirect:'/login', // 当访问根路径时，会重定向到 /login 路径。
        // 定义子路由
        children: [
            // 欢迎页面组件 
            {                                   
                name:'welcome',
                path:'welcome',
                meta:{
                    title:'欢迎体验保险报销系统'
                },
                component:()=>import('@/views/Welcome.vue')
            },
            // 仪表盘
            {
                name:'dashboard',
                path:'/system/dashboard',
                meta:{
                    title:'仪表盘'
                },
                component:()=>import('./../views/System/Dashboard.vue')
            },
        ]
    },
    // 登录模块
    {                   
        name:'login',
        path:'/login',
        meta:{
            title:'登录'
        },
        component:()=>import('./../views/Login.vue')
    },
    // 404页面
    {                   
        name:'404',
        path:'/404',
        meta:{
            title:'页面不存在'
        },
        component:()=>import('./../views/404.vue')
    },

]

// 使用 createRouter 函数创建路由实例，传入一个配置对象，其中：
// history: createWebHashHistory()：指定使用哈希模式的路由历史记录。
// routes：传入上面定义的路由配置数组。
const router = createRouter(
    {
        history:createWebHashHistory(),
        routes
    }
)

// 异步加载路由
async function loadAsyncRoutes() {
    console.log('===>', document.location.hash)
    // 判断当前是否为登录页面，如果是则直接返回
    if (document.location.hash == '#/login' || document.location.hash == '#/') {
        return;
    }
    
    try {
        let userInfo = storage.getItem('userInfo') || {}
        if (!userInfo.token) return;
        const { menuList } = await API.getPermissionList()
        let routes = utils.generateRoute(menuList)
        routes.map(route => {
            let url = `./../views/${route.component}.vue`
            route.component = () => import(/* @vite-ignore */url) 
            router.addRoute("home", route)
        })
    } catch (error) {
        //console.error('加载动态路由失败:', error)
    }
}



await loadAsyncRoutes();    //页面加载完成后，异步加载路由



/*
// 判断当前地址是否可以访问
function checkPermission(path) {
    // 获取全量路径,并进行过滤，filter方法返回一个新数组，包含所有符合条件的元素
    // 存在当前路径则返回true，否则返回false
    let hasPermission = router.getRoutes().filter(route => route.path == path).length
    if (hasPermission) {
        return true
    } else {
        return false
    }
}
*/

//导航守卫,to代表到哪里去，form代表从哪里来，next代表接下来要做什么,即放行
router.beforeEach((to, from, next) => {
    // 通过to来获取当前访问的路由的path
    if (router.hasRoute(to.name)) {
        // document指整个页面的文档对象，document.title指当前页面的标题
        document.title = to.meta.title
        next()
    } else {
        next('/404')
    }
})

// 将创建好的路由实例导出，以便在 main.js 中引入并使用
export default router